<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>监听watch-计算属性computed</title>
</head>
<body>
  <div id="app">
    {{num}}
    <button v-on:click="num++">computed+</button>
    {{fullname}}
    <button v-on:click="getfullname()">修改依赖 走get</button>
    <button v-on:click="changefullname('ddddddd')">设置funllname+ 走set</button>
    <br>

    <input type="text" v-model="search" />
    <p v-if="showSearch">正在搜索</p>
    <ul >
      <li v-for="item in result">{{item}}</li>
    </ul>
  </div>


<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  new Vue({
    el:"#app",
    data:{
      num:0,
      firstname: 'chen',
      lastname: 'xinping',
      search:'',
      showSearch:false,
      result:[]
    },
    // computed 计算属性(监听数据变化,必须同步) 
    //   vue会分析函数里的代码(检测依赖,依赖不改变就不会执行(网页初始化会执行一次))
    //   缓存机制 在后续使用这个属性时,如果依赖没改变,会返回之前的计算结果,不会再执行函数
    computed:{
      fullname:{
        get:function () { // 当获取fullname值的时候 走get属性 没有set会默认走get
          console.log('获取funllname');
          return this.firstname + '' + this.lastname;
        },
        set:function (n) { // 当设置fullname值的时候 走set属性
          console.log('设置funllname');
          this.firstname = n;
        }
      }
    },
    methods:{//methods不会分析函数里的代码
      getfullname:function () { // 设置firstname fullname依赖将改变 走get
        this.firstname += 'li';
      },
      changefullname:function () {// 设置fullname 走set
        this.fullname = 'li';
      }
    },
    watch:{ //监听(新数据，旧数据) 可以异步
      search: function (n,o) {
        this.showSearch = true;
        let _this = this;//setTimeout里的this是window(自调用)，需要把vue实例弄出来
              //或者用箭头函数创建setTimeout函数，这样其this指向其父级
        setTimeout(function () { //500毫秒后改变result
          _this.result = ['1','2'];
          _this.showSearch = false;

        },1000)
      },
      num: {
        handler(val) {
            console.log(val)
        },
        immediate: true
      },
    }
  })
</script>
</body>
</html>